<template>
  <div class="mt50 mb50">
    <a-row :gutter="[16, 32]" class="text_left">
      <a-col :xl="8" :lg="8" :md="12" :sm="24" :xs="24">
        <h5>人员</h5>
        <p>网站管理员</p>
        <p class="black_bold">黄静</p>
        <br />
        <p>制作人</p>
        <p class="black_bold">梁昱扬 周林 彭宇轩</p>
      </a-col>
      <a-col :xl="8" :lg="8" :md="12" :sm="24" :xs="24">
        <h5>菜单</h5>
        <a href="#"><p>健康课程</p></a>
        <a href="#"><p>健康问答</p></a>
        <a href="#"><p>健康知识</p></a>
        <a href="#"><p>健康管理</p></a>
        <a href="#"><p>个人主页</p></a>
      </a-col>
      <a-col :xl="8" :lg="8" :md="12" :sm="24" :xs="24">
        <h5>联系我们</h5>
        <p>网站管理员:306744855@qq.com</p>
        <p>制作人:1418839021@qq.com</p>
        <p>联系电话:15217191707</p>
        <a-row class="mt15">
          <a-col :span="6">
            <a-button>联系我们</a-button>
          </a-col>
          <a-col :span="6">
            <a-button @click="showModal">问题反馈</a-button>
          </a-col>
        </a-row>
        <a-modal
          title="问题反馈"
          :visible="visible"
          width="50%"
          @ok="handleOk"
          @cancel="handleCancel"
        >
          <a-dropdown>
            <a class="ant-dropdown-link" @click.prevent>
              Cascading menu
              <DownOutlined />
            </a>
            <template #overlay>
              <a-menu>
                <a-menu-item>1st menu item</a-menu-item>
                <a-menu-item>2nd menu item</a-menu-item>
                <a-sub-menu key="test" title="sub menu">
                  <a-menu-item>3rd menu item</a-menu-item>
                  <a-menu-item>4th menu item</a-menu-item>
                </a-sub-menu>
                <a-sub-menu title="disabled sub menu" disabled>
                  <a-menu-item>5d menu item</a-menu-item>
                  <a-menu-item>6th menu item</a-menu-item>
                </a-sub-menu>
              </a-menu>
            </template>
          </a-dropdown>
          <p>标题</p>
          <a-input
            v-model="problem.title"
            placeholder="请输入标题"
            allow-clear
          />
          <p>问题描述</p>
          <a-textarea
            v-model="problem.questions"
            placeholder="Hi,请具体描述您的问题"
            showCount
            :maxlength="300"
            :rows="12"
            allow-clear
          />
          <p>图片上传</p>
          <a-upload
            name="file"
            action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
            list-type="picture-card"
            :customRequest="customRequest"
            :beforeUpload="beforeUpload"
          >
            <a-button> <a-icon type="upload" /> 点击上传 </a-button>
          </a-upload>
          <p>联系方式</p>
          <a-input
            style="margin-top: 15px"
            v-model="problem.mobile"
            placeholder="请输入您的联系方式"
            allow-clear
          />
        </a-modal>
      </a-col>
    </a-row>
    <div class="mt100 mb50" />
    <a-row class="text_left">
      <a-col :xl="4" :lg="5" :md="6" :sm="24" :xs="24">
        <p class="black_bold">粤ICP备2023040670号</p>
      </a-col>
      <a-col :xl="4" :lg="5" :md="6" :sm="24" :xs="24">
        <p>healthcollege.cn</p>
      </a-col>
    </a-row>
    <a-back-top />
  </div>
</template>

<script>
import { message } from 'ant-design-vue';
export default {
  data() {
    return {
      visible: false,
      problem: {
        title: "",
        mobile: "",
        questions: "",
        state: "0",
        pic: "",
      },
    };
  },
  created() {
  },
  methods: {
    changeMenu(route) {
      console.log(route);
      this.$router.push(route);
    },
    showModal() {
      this.visible = true;
    },
    async handleOk(e) {
      console.log("OK");
      const res = await this.$request.post("/problem", this.problem);
      console.log(res)
      this.visible = false;
      if (res.data.errorCode == 0) {
        message.success("反馈成功!");
      }
    },
    handleChange() {},
    beforeUpload(file) {
      const isJpgOrPng =
        file.type === "image/jpeg" || file.type === "image/png";
      if (!isJpgOrPng) {
        message.error("You can only upload JPG/PNG file!");
      }
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        message.error("Image size can not exceed 2MB!");
      }
      return isJpgOrPng && isLt2M;
    },
    customRequest(options) {
      const reader = new FileReader();
      reader.onload = () => {
        // 转换完成，reader.result 即为转换后的Base64
        this.problem.pic = reader.result;
        options.onSuccess({
          status: "done",
          url: reader.result,
        });
      };
      reader.readAsDataURL(options.file);
    },
    handleCancel(e) {
      console.log("Cancel");
      this.visible = false;
    },
  },
};
</script>

<style lang="scss" scoped>
p {
  font-size: 16px;
  margin-bottom: 3px;
  color: gray;
}

h5 {
  margin-bottom: 30px;
}

.aca_main {
  .aca_main_group {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
  }
}

.black_bold {
  color: black;
  font-weight: bold;
}
</style>